<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" @keyup.enter.native="getOrderList()">
            <el-button slot="append" icon="el-icon-search" @click="getOrderList()"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="orderList" style="width: 100%" border stripe>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="300">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格">
        </el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="{row}">
            <el-tag :type="row.order_pay ==1?'success':'danger'">{{row.order_pay ==1?'已付款':"未付款"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货">
        </el-table-column>
        <el-table-column label="下单时间" width="185">
          <template slot-scope="{row}">
            {{$dayjs(row.create_time).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" title="修改地址" @click="editAddress(row)" size="mini" icon="el-icon-edit">
            </el-button>
            <el-button type="success" size="mini" @click="showDialog" icon="el-icon-location"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top:20px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pagesize"
        layout=" prev, pager, next, jumper,->,total, sizes" :total="total">
      </el-pagination>
    </el-card>

    <!-- 修改地址的对话框 -->
    <el-dialog title="修改地址信息" :visible.sync="dialogVisibleEdit" width="50%" @close="addressClosed">

      <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="80px">
        <el-form-item label="省/市/区" prop="address1">
          <el-cascader v-model="addressForm.address1" :options="cityData" :props="{ expandTrigger: 'hover' }">
            <!-- @change="handleChange" -->
          </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 定位按钮的回调 -->
    <el-dialog title="物流进度" :visible.sync="dialogVisibleAddress" width="50%">

      <span slot="footer" class="dialog-footer">

      </span>
    </el-dialog>
  </div>
</template>

<script>
  import citydata from "./citydata"
  export default {
    name: "Order",
    data() {
      return {
        //请求需要的参数
        queryInfo: {
          query: "",
          pagenum: 1,
          pagesize: 10
        },
        orderList: [],
        total: 0,
        //城市数据
        cityData: citydata,
        //修改地址的对话框的隐藏与显示
        dialogVisibleEdit: false,
        //地址框的隐藏与显示
        dialogVisibleAddress: false,
        //物流信息
        progressInfo: [],
        // 修改框的数据
        addressForm: {
          address1: [],
          address2: ""
        },
        //修改地址的验证规则
        addressFormRules: {
          address1: [{
            required: true,
            message: '请选择省/市/区',
            trigger: 'blur'
          }, ],
          address2: [{
            required: true,
            message: '请填写详细的地址',
            trigger: 'blur'
          }, ],
        }
      }
    },
    methods: {
      // 获取数据列表
      async getOrderList() {
        let result = await this.$requests.get("orders", {
          params: this.queryInfo
        })
        if (result.meta.status == 200) {
          this.orderList = result.data.goods
          this.total = result.data.total
        } else {
          return this.$message.error("网络不佳,请稍后再试")
        }
      },
      //监听页数展示多少发生变化
      handleSizeChange(count) {
        this.queryInfo.pagesize = count
        this.getOrderList()
      },
      //页数变化发生改变
      handleCurrentChange(page) {
        this.queryInfo.pagenum = page
        this.getOrderList()
      },
      //修改按钮的回调
      editAddress() {
        this.dialogVisibleEdit = true
      },
      //清空修改地址的数据
      addressClosed() {
        this.$refs.addressFormRef.resetFields()
      },
      //修改地址框的确认按钮回调
      submitForm() {
        this.$refs.addressFormRef.validate((valid) => {
          if (valid) {
            this.$message.success("修改成功")
            this.dialogVisibleEdit = false
          } else {
            this.$message.error("请认真填写数据")
            return false;
          }
        });
      },
      //定位按钮的回调
      async showDialog() {
        //接口坏了
        // let result = await this.$requests.get(`/kuaidi/1106975712662`)
        // if (result.meta.status == 200) {
        //   this.progressInfo = result.data
        //   console.log(this.progressInfo)
        // } else {
        //   this.$message.error("网络不佳,请稍后再试")
        // }
        this.dialogVisibleAddress = true
      }
    },
    mounted() {
      this.getOrderList()
    },
  }

</script>

<style lang="less" scoped>

</style>
